<template>
  <div class="containers" ref="content">
    <div>
      <Button type="primary" size="small" @click="onSubmit"> 提交 </Button>
      <Button type="primary" size="small" @click="onRefresh"> 重置 </Button>
    </div>
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>
<script lang="ts">
  import { Button } from 'ant-design-vue';
  import { defineComponent, ref } from 'vue';
  import BpmnModeler from 'bpmn-js/lib/Modeler';
  //工具栏
  import translations from './components/translations';
  import propertiesPanelModule from 'bpmn-js-properties-panel';
  import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
  import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
  import { xmlStr } from './demo/xmlStr';
  // 以下为bpmn工作流绘图工具的样式
  import 'bpmn-js/dist/assets/diagram-js.css'; // 左边工具栏以及编辑节点的样式
  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
  import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
  export default defineComponent({
    components: {
      Button,
    },
    setup() {
      const canvas = ref(null);
      const bpmnModeler = ref(null);
      //汉化工具
      const customTranslateModule = ref({
        translate: ['value', customTranslate],
      });
      function init() {
        // 获取到属性ref为“canvas”的dom节点
        const canvas_ = canvas.value;
        // 建模
        bpmnModeler.value = new BpmnModeler({
          container: canvas_,
          //添加控制板
          propertiesPanel: {
            parent: '#js-properties-panel',
          },
          additionalModules: [
            //汉化翻译
            customTranslateModule.value,
            // 左边工具栏以及节点
            propertiesProviderModule,
            // 右边的工具栏
            propertiesPanelModule,
          ],
          moddleExtensions: {
            camunda: camundaModdleDescriptor,
          },
        });
        createNewDiagram();
      }
      function createNewDiagram() {
        // 将字符串转换成图显示出来
        bpmnModeler.value.importXML(xmlStr, (err) => {
          if (err) {
            console.error(err);
          } else {
            // 这里是成功之后的回调, 可以在这里做一系列事情
            success();
          }
        });
      }
      //汉化方法
      function customTranslate(template, replacements) {
        replacements = replacements || {};
        // Translate
        template = translations[template] || template;
        // Replace
        return template.replace(/{([^}]+)}/g, function (_, key) {
          return replacements[key] || '{' + key + '}';
        });
      }
      function success() {
        // console.log('创建成功!')
        addEventBusListener();
      }
      function addEventBusListener() {
        // 监听 element
        const eventBus = bpmnModeler.value.get('eventBus');
        const eventTypes = ['element.click', 'element.changed', 'element.updateLabel'];
        eventTypes.forEach(function (eventType) {
          eventBus.on(eventType, function (e) {
            console.log(eventType);
            if (!e || e.element.type == 'bpmn:Process') return;
            if (eventType === 'element.changed') {
              // that.elementChanged(e)
            } else if (eventType === 'element.click') {
              console.log('点击了element', e);
              // if (e.element.type === 'bpmn:Task') {
              // }
            } else if (eventType === 'element.updateLabel') {
              console.log('element.updateLabel', e.element);
            }
          });
        });
      }

      const onSubmit = async () => {
        const { xml } = await bpmnModeler.value.saveXML({ format: true });
        console.log('xml', xml);
      };

      const onRefresh = async () => {
        createNewDiagram();
      };

      return {
        canvas,
        init,
        onSubmit,
        onRefresh,
      };
    },
    mounted() {
      this.init();
    },
  });
</script>
<style lang="less" scoped>
  .containers {
    background-color: #ffffff;
    width: 100%;
    height: calc(100% - 22px);
    border: 1px solid rgb(41, 37, 31);
  }
  .canvas {
    width: 100%;
    height: 100%;
  }
  .panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
  }
  #js-properties-panel {
    max-height: calc(100% - 22px);
    overflow: scroll;
  }
</style>
